<template>
    <!-- cdfs-备注信息列表 -->
    <div class="fillcontain">

        <el-dialog
                title="备注信息"
                :visible.sync="drawer"
                :direction="direction"
                :width="'70%'"
                :before-close="handleClose"
                center>
            <div class="contain">
                <el-row>
                    <el-col :span="24" class="pb15 pt5">
                        <el-button type="danger" plain @click="showAdd = true">新增备注</el-button>
                    </el-col>
                </el-row>
                <div v-if="showAdd">
                    <el-row>
                        <el-input clearable
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="remark">
                        </el-input>
                    </el-row>
                    <el-row>
                        <el-col :span="12" class="pb15 pt15 pr10 text_right">
                            <el-button type="danger" plain  @click="showAdd = false">取消</el-button>
                        </el-col>
                        <el-col :span="12" class="pb15 pt15 pr10 text_left">
                            <el-button type="danger" class="Defaultbutton" @click="addRemark()">保存</el-button>
                        </el-col>
                    </el-row>
                </div>

                <!-- 查询结果列表 -->
                <div class="table_container">
                    <el-table ref="multipleTable" @row-click="showDesc" v-loading="loading" :data="tableData" tooltip-effect="dark"
                              highlight-current-row header-cell-class-name="table-header-class"
                              style="width:100%">
                        <el-table-column property="sserialno" label="序号" align='center' min-width="50" show-overflow-tooltip></el-table-column>
                        <el-table-column property="snodedes" label="节点名称" align='center' min-width="80" show-overflow-tooltip></el-table-column>
                        <el-table-column property="suserid" label="处理人员" align='center' min-width="80" show-overflow-tooltip></el-table-column>
                        <el-table-column property="stime" label="处理时间" align='center' min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column property="sremark" label="备注信息" align='center' min-width="180" show-overflow-tooltip></el-table-column>
                    </el-table>
                    <el-row>
                        <el-col :span="24">
                            <div class="pagination">
                                <el-pagination
                                        background
                                        v-if='paginations.total > 0'
                                        :page-sizes="paginations.pageSizes"
                                        :page-size="paginations.pageSize"
                                        :layout="paginations.layout"
                                        :total="paginations.total"
                                        :current-page='paginations.pageIndex'
                                        @current-change='handleCurrentChange'
                                        @size-change='handleSizeChange'>
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-row>
					<el-row>
						<el-input clearable
							v-if="showRemarkTemp"
						        type="textarea"
						        :autosize="{ minRows: 3, maxRows: 10}"
						        disabled
						        v-model="remarkTemp">
						</el-input>
					</el-row>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import constant from '@/utils/constant';
    import {cdfsRemarkListReq} from "@/api/taskCenter/taskCommon";
    import {addCdfsRemark} from "../../api/taskCenter/taskCommon";

    export default {
        name: "cdfs-remark-list",
        data() {
            return {
                // 查询条件
				preRoute:'',//是否从保全核保页面过来的
                direction: 'rtl',
                tableData: [],
                loading: false,
                nodeMap: {},//节点对象
                remark: "",
				remarkTemp:'',//显示备注信息
				showRemarkTemp:false,
                showAdd: false,
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
            }
        },
        created() {
        },
        mounted() {

        },
        props: {
            drawer: {
                type: Boolean,
                default: false
            },
            taskNo: {
                type: String
            },
        },
        methods: {
			showDesc(row) {
				//保全核保的单击功能
				if (this.showAdd && this.preRoute == 'posUnderwriteList') {
					this.remark = row.sremark;
				}
				this.showRemarkTemp = !this.showRemarkTemp;
				this.remarkTemp = row.sremark;
			},	
            handleClose(done) {
                this.$emit('close', this.drawer);
            },
            // 综合查询列表
            getList(taskNo) {
                this.tableData = [];
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                cdfsRemarkListReq(taskNo,this.paginations.pageSize,this.paginations.pageIndex).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            addRemark() {
                this.$store.dispatch('loading/CHANGE_LOADING', true);
                addCdfsRemark(this.taskNo, this.remark).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                    if (res.resultCode == constant.SUCCESS) {
                        this.getList(this.taskNo);
                        this.remark = "";
                        this.showAdd = false;
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList(this.taskNo);
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList(this.taskNo);
            },
        },
        watch: {
            taskNo: function (newValue) {
                if (newValue != undefined && newValue != ''){
					this.preRoute = this.$route.name;
                    this.paginations.pageIndex = 1;
                    this.paginations.pageSize = 10;
                    this.getList(newValue);
                }

            },
        },
        computed: {
            ...mapGetters(['tags']),

        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;

        .svg-icon {
            font-size: 14px;
            fill: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
        border-top: 1px solid #e1e1e1;
    }
</style>



